<template>
  <a-popover v-model:open="visible" trigger="click" placement="bottomLeft" :align="{ offset: [0, 0] }">
    <template #content>
      <div class="p-2 flex flex-wrap justify-between w-[560px] h-[300px] overflow-auto">
        <div v-for="icon in iconsList" :key="icon.name" class="p-2 w-1/3 text-left text-xl hover:bg-thin rounded cursor-pointer" @click="onSelect(icon.name)">
          <component :is="icon.component" />
          <span class="p-2 w-1/3 text-left text-xs truncate">
            {{ icon.name }}
          </span>
        </div>
      </div>
    </template>
    <a-input ref="inputRef" v-model:value="inputValue" :placeholder="placeholder" @change="onChange" />
  </a-popover>
</template>

<script setup>
/**
 * @name:在Tags中选择项目
 */
import { ref, watch } from 'vue'
import * as Icon from '@ant-design/icons-vue'

const iconsList = []
for (const key in Icon) {
  if (Object.hasOwnProperty.call(Icon, key)) {
    const element = Icon[key]
    key.indexOf('Outlined') > -1 && iconsList.push({ name: key, component: element })
  }
}
const visible = ref(false)
const inputRef = ref()
const inputValue = ref()
const emit = defineEmits(['update:value', 'select', 'close'])
const props = defineProps({
  value: {
    type: String,
    default: null
  },
  placeholder: {
    type: String,
    default: '请选择'
  }
})
watch(
  () => props.value,
  (val) => {
    inputValue.value = val
  }
)
const onChange = () => {
  emit('update:value', inputValue.value)
}
const onSelect = (value) => {
  emit('update:value', value)
  inputValue.value = value
  visible.value = false
}
</script>
<style lang="less" scoped></style>
